<template>
  <div class="box">
    <el-form ref="formRef" :rules="rules" :model="dynamicValidateForm" label-width="70px" class="demo-dynamic">
      <el-form-item prop="adminname" label="用户名">
        <el-input v-model="dynamicValidateForm.adminname" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="dynamicValidateForm.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { login } from '@/api/user.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useDataStore } from '@/stores/user.js'

const formRef = ref()
const dynamicValidateForm = reactive({
  adminname: '',
  password: ''
})

const rules = reactive({
  adminname: [
    { required: true, message: '输入邮箱', trigger: 'blur' },
    // { type: 'email', message: '输入正确邮箱规则', trigger: 'change' }
  ],
  password: [
    { required: true, trigger: 'blur', message: '输入密码', },
    // { min: 6, max: 16, message: '密码最少6位, 最多16位', trigger: 'change' }
  ]
})

const router = useRouter()
let useData = useDataStore()

const submitForm = () => {
  login('/admin/login', {
    adminname: dynamicValidateForm.adminname,
    password: dynamicValidateForm.password
  }).then(res => {
    // 登录成功
    if (res.code === '200') {
      ElMessage({
        message: res.message,
        type: 'success',
      })

      // 存用户信息
      useData.userData = res.data

      // 跳转到首页
      router.push({ path: '/' })
    } else {
      ElMessage({
        message: res.message,
        type: 'error',
      })
    }
  })
}

</script>

<style scoped lang="scss">
@mixin fn() {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.box {
  @include fn();
  background: url(http://180.76.99.14/hg-admin/static/media/bg.035dc3cb90909320a094.jpg) top no-repeat;
  background-size: cover;

  .demo-dynamic {
    width: 400px;
    height: 260px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 10px #ccc;
    @include fn();
    margin: auto;
    padding: 40px;
  }
}
</style>